<template>
  <div class="google-translate">
    <div class="language-selector">
      <Icon type="ios-globe" class="globe-icon" />
      <Select 
        v-model="currentLang" 
        @on-change="handleLanguageChange" 
        class="custom-select"
        placement="bottom-start"
        :placeholder="getLanguageDisplay(currentLang)"
      >
        <Option value="zh" class="lang-option">
          <span class="flag-icon">🇨🇳</span>
          <span class="lang-text">中文</span>
        </Option>
        <Option value="en" class="lang-option">
          <span class="flag-icon">🇺🇸</span>
          <span class="lang-text">English</span>
        </Option>
        <Option value="es" class="lang-option">
          <span class="flag-icon">🇪🇸</span>
          <span class="lang-text">Español</span>
        </Option>
        <Option value="fr" class="lang-option">
          <span class="flag-icon">🇫🇷</span>
          <span class="lang-text">Français</span>
        </Option>
        <Option value="de" class="lang-option">
          <span class="flag-icon">🇩🇪</span>
          <span class="lang-text">Deutsch</span>
        </Option>
        <Option value="ja" class="lang-option">
          <span class="flag-icon">🇯🇵</span>
          <span class="lang-text">日本語</span>
        </Option>
        <Option value="ko" class="lang-option">
          <span class="flag-icon">🇰🇷</span>
          <span class="lang-text">한국어</span>
        </Option>
      </Select>
    </div>
    <Button 
      v-if="showTranslateBtn" 
      @click="translatePageContent" 
      :loading="translating"
      class="translate-btn"
      size="small"
    >
      <Icon type="ios-refresh" v-if="translating" class="spinning" />
      <Icon type="ios-text" v-else />
      {{ translating ? getTranslatingText() : getTranslateText() }}
    </Button>
  </div>
</template>

<script>
import GoogleTranslateService from '@/plugins/googleTranslate'

export default {
  name: 'GoogleTranslate',
  data() {
    return {
      currentLang: localStorage.getItem('translate-lang') || 'zh',
      translating: false,
      showTranslateBtn: false,
      originalTexts: new Map(), // 存储原始文本
      languageNames: {
        zh: '中文',
        en: 'English', 
        es: 'Español',
        fr: 'Français',
        de: 'Deutsch',
        ja: '日本語',
        ko: '한국어'
      }
    }
  },
  mounted() {
    this.showTranslateBtn = !['zh'].includes(this.currentLang)
    // 如果当前语言不是中文，等待页面完全加载后再自动翻译
    if (this.currentLang !== 'zh') {
      // 使用 window.onload 确保页面完全加载后再翻译
      if (document.readyState === 'complete') {
        // 如果页面已经加载完成，延迟一段时间再翻译
        setTimeout(() => {
          this.translatePageContent()
        }, 1500) // 延迟1.5秒，确保动态内容已加载
      } else {
        // 如果页面尚未加载完成，等待 load 事件
        window.addEventListener('load', () => {
          // 页面加载完成后，再延迟一段时间翻译
          setTimeout(() => {
            this.translatePageContent()
          }, 1500) // 延迟1.5秒，确保动态内容已加载
        })
      }
    }
  },
  methods: {
    getLanguageDisplay(lang) {
      return this.languageNames[lang] || '请选择语言'
    },
    
    getTranslateText() {
      const texts = {
        zh: '翻译页面',
        en: 'Translate Page',
        es: 'Traducir Página',
        fr: 'Traduire la Page',
        de: 'Seite Übersetzen',
        ja: 'ページを翻訳',
        ko: '페이지 번역'
      }
      return texts[this.currentLang] || '翻译页面'
    },
    
    getTranslatingText() {
      const texts = {
        zh: '翻译中...',
        en: 'Translating...',
        es: 'Traduciendo...',
        fr: 'Traduction...',
        de: 'Übersetzen...',
        ja: '翻訳中...',
        ko: '번역 중...'
      }
      return texts[this.currentLang] || '翻译中...'
    },
    
    handleLanguageChange(lang) {
      this.currentLang = lang
      localStorage.setItem('translate-lang', lang)
      
      // 如果是中文，恢复原始文本
      if (lang === 'zh') {
        this.restoreOriginalTexts()
        this.showTranslateBtn = false
      } else {
        this.showTranslateBtn = true
        // 延迟翻译，确保页面内容已更新
        setTimeout(() => {
          this.translatePageContent()
        }, 500) // 延迟0.5秒再翻译
      }
    },
    
    // 获取页面中所有需要翻译的文本节点
    getTextNodes(element = document.body) {
      const textNodes = []
      const walker = document.createTreeWalker(
        element,
        NodeFilter.SHOW_TEXT,
        {
          acceptNode: (node) => {
            // 过滤掉空白文本和脚本、样式标签内的文本
            const parent = node.parentElement
            const text = node.textContent.trim()
            
            // 基本过滤条件 - 只排除空文本和没有父元素的节点
            if (!parent || !text) {
              return NodeFilter.FILTER_REJECT
            }
            
            // 只排除脚本和样式相关标签
            const excludeTags = ['SCRIPT', 'STYLE', 'NOSCRIPT']
            if (excludeTags.includes(parent.tagName)) {
              return NodeFilter.FILTER_REJECT
            }
            
            // 排除翻译组件自身
            if (parent.closest('.google-translate')) {
              return NodeFilter.FILTER_REJECT
            }
            
            return NodeFilter.FILTER_ACCEPT
          }
        }
      )
      
      let node
      while (node = walker.nextNode()) {
        textNodes.push(node)
      }
      
      console.log('找到的文本节点数量:', textNodes.length)
      if (textNodes.length > 0) {
        console.log('前5个文本节点内容:', textNodes.slice(0, 5).map(n => n.textContent.trim()))
      } else {
        console.log('未找到任何文本节点，请检查过滤条件')
      }
      
      return textNodes
    },
    
    // 翻译页面内容
    async translatePageContent() {
      if (this.currentLang === 'zh') return
      
      // 检查页面是否已完全加载
      if (document.readyState !== 'complete') {
        console.log('页面尚未完全加载，延迟翻译...')
        // 等待页面加载完成
        setTimeout(() => {
          this.translatePageContent()
        }, 1000)
        return
      }
      
      this.translating = true
      try {
        const textNodes = this.getTextNodes()
        const textsToTranslate = []
        const nodeIndices = [] // 存储节点索引，用于后续匹配
        
        // 收集需要翻译的文本
        textNodes.forEach((node, index) => {
          const text = node.textContent.trim()
          if (text && !this.originalTexts.has(index)) {
            // 保存原始文本
            this.originalTexts.set(index, {
              node: node,
              originalText: text
            })
            textsToTranslate.push(text)
            nodeIndices.push(index) // 记录节点索引
          }
        })
        
        console.log('收集到的待翻译文本数量:', textsToTranslate.length)
        console.log('前5个待翻译文本:', textsToTranslate.slice(0, 5))
        
        if (textsToTranslate.length === 0) {
          this.$Message.info('没有找到需要翻译的内容')
          return
        }
        
        // 批量翻译
        const translatedTexts = await GoogleTranslateService.batchTranslate(
          textsToTranslate,
          this.currentLang,
          'zh'
        )
        
        console.log('翻译结果数量:', translatedTexts.length)
        console.log('前5个翻译结果:', translatedTexts.slice(0, 5))
        
        // 确保翻译结果与原始文本数量一致
        if (translatedTexts.length !== textsToTranslate.length) {
          console.error('翻译结果数量与原始文本数量不一致')
          this.$Message.error('翻译结果异常，请重试')
          return
        }
        
        // 检查翻译结果是否与原始文本相同（可能是翻译失败）
        let failedTranslations = 0
        translatedTexts.forEach((translatedText, i) => {
          if (translatedText === textsToTranslate[i]) {
            failedTranslations++
          }
        })
        
        if (failedTranslations > 0) {
          console.warn(`${failedTranslations}/${translatedTexts.length} 个文本翻译失败或未变化`)
        }
        
        // 应用翻译结果 - 使用nodeIndices确保一一对应
        translatedTexts.forEach((translatedText, i) => {
          const nodeIndex = nodeIndices[i]
          const data = this.originalTexts.get(nodeIndex)
          if (data && data.node) {
            // 只有当翻译结果与原始文本不同时才应用
            if (translatedText !== data.originalText) {
              data.node.textContent = translatedText
              console.log(`翻译: "${data.originalText.substring(0, 20)}..." => "${translatedText.substring(0, 20)}..."`);
            }
          }
        })
        
        this.$Message.success(this.getSuccessMessage())
      } catch (error) {
        console.error('翻译失败:', error)
        this.$Message.error(this.getErrorMessage())
      } finally {
        this.translating = false
      }
    },
    
    // 恢复原始文本
    restoreOriginalTexts() {
      this.originalTexts.forEach((data) => {
        if (data.node && data.node.parentElement) {
          data.node.textContent = data.originalText
        }
      })
    },
    
    getSuccessMessage() {
      const messages = {
        zh: '页面翻译完成',
        en: 'Page translation completed',
        es: 'Traducción de página completada',
        fr: 'Traduction de page terminée',
        de: 'Seitenübersetzung abgeschlossen',
        ja: 'ページ翻訳完了',
        ko: '페이지 번역 완료'
      }
      return messages[this.currentLang] || '页面翻译完成'
    },
    
    getErrorMessage() {
      const messages = {
        zh: '翻译失败，请稍后重试',
        en: 'Translation failed, please try again later',
        es: 'Traducción fallida, inténtelo de nuevo más tarde',
        fr: 'Échec de la traduction, veuillez réessayer plus tard',
        de: 'Übersetzung fehlgeschlagen, bitte versuchen Sie es später erneut',
        ja: '翻訳に失敗しました。後でもう一度お試しください',
        ko: '번역에 실패했습니다. 나중에 다시 시도해주세요'
      }
      return messages[this.currentLang] || '翻译失败，请稍后重试'
    }
  }
}
</script>

<style scoped>
.google-translate {
  display: flex;
  align-items: center;
  gap: 12px;
}

.language-selector {
  display: flex;
  align-items: center;
  position: relative;
}

.globe-icon {
  color: #fff;
  font-size: 16px;
  margin-right: 8px;
  opacity: 0.8;
}

.custom-select {
  width: 140px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.custom-select:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 自定义选择框样式 */
.custom-select >>> .ivu-select-selection {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.custom-select >>> .ivu-select-selection:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.custom-select >>> .ivu-select-arrow {
  color: #fff;
}

.custom-select >>> .ivu-select-selected-value {
  color: #fff;
  font-weight: 500;
}

/* 下拉选项样式 */
.lang-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.flag-icon {
  font-size: 18px;
  margin-right: 8px;
  display: inline-block;
}

.lang-text {
  font-size: 14px;
  font-weight: 500;
}

/* 翻译按钮样式 */
.translate-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 500;
  padding: 6px 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.translate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.translate-btn:active {
  transform: translateY(0);
}

.translate-btn >>> .ivu-btn-loading {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 旋转动画 */
.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .google-translate {
    gap: 8px;
  }
  
  .custom-select {
    width: 120px;
  }
  
  .translate-btn {
    padding: 4px 12px;
    font-size: 12px;
  }
}
</style>